<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>实人认证</title>
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://public.esandcloud.com/libs/axios.min.js"></script>
    <script src="https://public.esandcloud.com/libs/plupload.full.min.js"></script>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/js/qrcode.js}"></script>
    <style type="text/css">
        .auth-index-container{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            /*flex-direction: column;*/
        }
        .auth-input-container{
            display: flex;
            width: 30%;
            display: flex;
            flex-direction: column;
            padding: 20px;
            /*height: 500px;*/
            /*background: #f7fcff;*/
            border-radius: 20px;
        }
        .auth-input-item{
            display: flex;
            padding: 10px;
            align-items: center;
            justify-content: center;
        }
        .auth-input-item-label{
            width: 80px;
            color: #3F3F3F;
            font-size: 14px;

        }
        .auth-item-input{
            width: calc(100% - 80px);
            height: 45px;
            padding: 0 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            /*font-size: 16px;*/
        }
        .auth-item-input:focus{
            border-color: #40AFFE;
            outline: none;
        }
        .auth-btn{
            width: 100%;
            height: 45px;
            border: none;
            background: #40AFFE;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
        }
        .auth-link-container{
            width: 30%;
            min-height: 400px;
            padding: 20px;
            background: #f2f2f2;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*margin-top: 20px;*/
            /*background: #40AFFE;*/
        }
        .auth-link-text{
            font-size: 14px;
            color: #3F3F3F;
            margin-bottom: 10px;
            text-align: center;
            width: 100%;
            text-align: left;
        }
        .auth-link-url{
            font-size: 12px;
            color: #40AFFE;
            word-break: break-all;
            margin-bottom: 20px;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            width: 100%;
            text-align: center;
            cursor: pointer;
        }
        .auth-link-url:hover{
            background: #f9f9f9;
        }
        .auth-btn-group{
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            width: 100%;
        }
        .auth-action-btn{
            flex: 1;
            height: 40px;
            border: none;
            background: #40AFFE;
            color: #fff;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .auth-action-btn:hover{
            background: #2d9aee;
        }
        .auth-copy-btn{
            background: #52c41a;
        }
        .auth-copy-btn:hover{
            background: #45b015;
        }
        #qrcode{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div data-role="page">
    <div id="container" style="display: none;">
        <a id="selectfiles"  href="javascript:void(0);" class='btn'>选择文件</a>
        <a id="postfiles" href="javascript:void(0);"  class='btn'>开始上传</a>
    </div>
    <div class="auth-index-container f-c-c">
        <div class="auth-input-container">
            <div class="auth-input-item">
                <span class="auth-input-item-label">姓名</span>
                <input class="auth-item-input" id="certName" placeholder="请输入姓名" value=""/>
            </div>
            <div class="auth-input-item">
                <span class="auth-input-item-label">身份证号</span>
                <input class="auth-item-input" id="certNo" placeholder="请输入身份证号" value=""/>
            </div>
            <div class="auth-input-item">
                <button class="auth-btn" onclick="handleStartAuth()">开始认证</button>
            </div>
        </div>
        <div class="auth-link-container">

        </div>
    </div>
</div>

</body>
<script>
    let cameraDeviceID
    window.onload = async function (){

    }

    //认证
    async function handleStartAuth() {
        let certName = $("#certName").val();
        let certNo = $("#certNo").val();
        if(certName.length < 2){
            layer.msg('姓名输入不正确', {time: 3000, icon:2});
            return;
        }
        if(!(certNo.length == 18 || certNo.length == 15)){
            layer.msg('身份证号长度不正确', {time: 3000, icon:2});
            return ;
        }
        if(!isValidCertNo(certNo)){
            layer.msg('身份证号内含不符合规范字符', {time: 3000, icon:2});
            return ;
        }
        let isAdult = checkAdult(certNo)
        if(!isAdult){
            layer.msg('该人员未满18岁', {time: 3000, icon:2});
            return ;
        }

        let params = {
            idName:certName,
            idNumber:certNo,
            livingType: "6",
            returnUrl: "https://dev.esandcloud.com/h5demo/esand/authResult"
        }
        $.post("/auth/getVerifyUrl",params,function (msg) {
            let res = $.parseJSON(msg);
            console.log(res)
            if(res.code == '0000'){
                let url = res.url;
                // 显示链接和二维码
                displayAuthLink(url);
            }else{
                layer.msg(res.msg, {time: 3000, icon:2});
            }
        })
    };

    function isValidCertNo(certNo) {
        // [0-9a-zA-Z] 匹配数字和大小写字母，但通过限定只允许 X/x 和数字
        const reg = /^[0-9Xx]+$/;
        return reg.test(certNo);
    }

    function checkAdult(idCardNumber) {
        // 提取身份证中的出生年份、月份和日期
        let birthYear = parseInt(idCardNumber.substring(6, 10), 10);
        let birthMonth = parseInt(idCardNumber.substring(10, 12), 10);
        let birthDay = parseInt(idCardNumber.substring(12, 14), 10);

        // 获取当前日期的年份、月份和日期
        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = currentDate.getMonth() + 1; // 月份是从0开始的，所以要加1
        let currentDay = currentDate.getDate();

        // 判断是否已经过了今年的生日
        if (currentMonth > birthMonth || (currentMonth === birthMonth && currentDay >= birthDay)) {
            return currentYear - birthYear >= 18;
        } else {
            return currentYear - birthYear - 1 >= 18;
        }
    }

    // 显示认证链接和二维码
    function displayAuthLink(url) {
        let container = $('.auth-link-container');
        
        // 清空容器
        container.empty();
        
        // 添加标题
        container.append('<div class="auth-link-text">请使用手机扫描二维码进行认证</div>');
        
        // 添加链接
        container.append('<div class="auth-link-url" id="authUrl" title="点击复制链接">' + url + '</div>');
        
        // 添加按钮组
        container.append(`
            <div class="auth-btn-group">
                <button class="auth-action-btn auth-copy-btn" onclick="copyAuthUrl()">复制链接</button>
                <button class="auth-action-btn" onclick="openAuthUrl()">打开链接</button>
            </div>
        `);
        
        // 创建二维码容器
        container.append('<div id="qrcode"></div>');
        
        // 生成二维码
        new QRCode(document.getElementById("qrcode"), {
            text: url,
            width: 200,
            height: 200,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        
        // 给链接添加点击复制功能
        $('#authUrl').click(function() {
            copyAuthUrl();
        });
    }

    // 复制链接到剪贴板
    function copyAuthUrl() {
        let urlText = $('#authUrl').text();
        
        // 使用现代浏览器的 Clipboard API
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(urlText).then(function() {
                layer.msg('链接已复制到剪贴板', {time: 2000, icon: 1});
            }).catch(function(err) {
                // 如果失败，使用传统方法
                copyFallback(urlText);
            });
        } else {
            // 使用传统方法
            copyFallback(urlText);
        }
    }

    // 传统复制方法（兼容旧浏览器）
    function copyFallback(text) {
        let textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        
        try {
            let successful = document.execCommand('copy');
            if (successful) {
                layer.msg('链接已复制到剪贴板', {time: 2000, icon: 1});
            } else {
                layer.msg('复制失败，请手动复制', {time: 2000, icon: 2});
            }
        } catch (err) {
            layer.msg('复制失败，请手动复制', {time: 2000, icon: 2});
        }
        
        document.body.removeChild(textarea);
    }

    // 打开认证链接
    function openAuthUrl() {
        let urlText = $('#authUrl').text();
        window.open(urlText, '_blank');
    }

</script>
</html>
